import React, { useState, useEffect, useCallback } from 'react';
import {
    getSofContractSelected,
    getAccOverallSelectPayList,
    getSysDepartmentFindList,
    getSysUserSelected
} from '../../../../../../Api/listUrl';
import {
    putAccFeedbackInfoInsertFeedbackInfo,
    getAccFeedbackInfoUpdateShow,
    postAccFeedbackInfoUpdateFeedbackInfo
} from '../../../../financialApi';
import { Modal, Form, Select, Row, Col, message, InputNumber, Radio, Input, Button } from 'antd';
const { Option } = Select;
const { TextArea } = Input;

/**
 * @description: 费用管理 -- 反馈列表 -- 添加反馈弹窗
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-09-16）完善
 */

const AddFeedBackModule = ({ addFeedBackModuleShow, setAddFeedBackModuleShow, listFun, clickId, setClickId }) => {
    const [form] = Form.useForm();
    const { validateFields, resetFields, setFieldsValue } = form;
    const [contractList, setContractList] = useState([]); //合同列表
    const [moneyPayList, setMoneyPayList] = useState([]); //费用申请流水号下拉
    const [departmentList, setDepartmentList] = useState([]); //承担部门
    const [userList, setUserList] = useState([]); //用户列表
    const [buttonLoading, setButtonLoading] = useState(false);
    const userFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSysUserSelected();
                if (code === '20000') {
                    setUserList(data);
                } else {
                    message.error(msg);
                }
            })();
        },
        [],
    )
    const departmentFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSysDepartmentFindList();
                if (code === '20000') {
                    setDepartmentList(data);
                } else {
                    message.error(msg);
                }
            })();
        },
        [],
    )
    const contractFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSofContractSelected();
                if (code === '20000') {
                    setContractList(data);
                } else {
                    message.error(msg);
                }
            })();
        },
        [],
    )
    const moneyPayFun = useCallback(
        () => {
            const parames = {
                isPay: 1,
                fillId: .getItem('userId')
            };
            ; (async () => {
                const { code, msg, data } = await getAccOverallSelectPayList(parames);
                if (code === '20000') {
                    setMoneyPayList(data)
                } else {
                    message.error(msg);
                }
            })()
        },
        [],
    )
    useEffect(() => {
        contractFun();
        moneyPayFun();
        departmentFun();
        userFun();
        if (clickId) {
            ; (async () => {
                const { code, msg, data } = await getAccFeedbackInfoUpdateShow({ id: clickId });
                if (code === '20000') {
                    setFieldsValue(data)
                } else {
                    message.error(msg);
                }
            })()
        }
    }, [contractFun, moneyPayFun, departmentFun, userFun, clickId, setFieldsValue])
    const handleOk = () => {
        validateFields().then(values => {
            setButtonLoading(true);
            if (clickId) {
                values.id = clickId;
                ; (async () => {
                    const { code, msg } = await postAccFeedbackInfoUpdateFeedbackInfo(values);
                    if (code === '20000') {
                        message.success('编辑反馈成功！');
                        setClickId(undefined);
                        listFun();
                        resetFields();
                        setButtonLoading(false);
                        setAddFeedBackModuleShow(false);
                    } else {
                        message.error(msg);
                    }
                })();
            } else {
                ; (async () => {
                    const { code, msg } = await putAccFeedbackInfoInsertFeedbackInfo(values);
                    if (code === '20000') {
                        message.success('添加反馈成功！');
                        listFun();
                        resetFields();
                        setButtonLoading(false);
                        setAddFeedBackModuleShow(false);
                    } else {
                        message.error(msg);
                    }
                })();
            }

        })
    };

    const handleCancel = () => {
        setClickId(undefined);
        resetFields();
        setButtonLoading(false);
        setAddFeedBackModuleShow(false);
    };
    return <Modal
        width={800}
        title={clickId ? "修改反馈" : "添加反馈"}
        visible={addFeedBackModuleShow}
        onCancel={handleCancel}
        bodyStyle={{ padding: '25px 63px' }}
        footer={[
            <Button style={{
                width: '88px',
                height: '34px',
            }} key="back" onClick={handleCancel}>
                取消
            </Button>,
            <Button key="submit" style={{
                width: '88px',
                height: '34px',
            }} type="primary" loading={buttonLoading} onClick={handleOk}>
                确定
            </Button>
        ]}
    >
        <Form form={form}>
            <Row>
                <Col span={12}>
                    <Form.Item
                        label="关联合同"
                        name="conNo"
                        wrapperCol={{ span: 20 }}
                        labelCol={{ span: 24, offset: 0 }}
                        rules={[
                            {
                                required: true,
                                message: '请选择关联合同!',
                            },
                        ]}
                    >
                        <Select>
                            {
                                contractList.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)
                            }
                        </Select>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        label="费用申请流水号"
                        name="serialNos"
                        wrapperCol={{ span: 15 }}
                        labelCol={{ span: 24, offset: 0 }}
                        rules={[
                            {
                                required: true,
                                message: '请选择费用申请流水号!',
                            },
                        ]}
                    >
                        <Select mode="multiple" >
                            {
                                moneyPayList.map(item => <Option value={item.name} key={item.id}>{item.name}</Option>)
                            }
                        </Select>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        label="费用性质"
                        name="nature"
                        wrapperCol={{ span: 15 }}
                        labelCol={{ span: 24, offset: 0 }}
                        rules={[
                            {
                                required: true,
                                message: '请输入费用性质!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        label="实报金额"
                        name="money"
                        wrapperCol={{ span: 15 }}
                        labelCol={{ span: 24, offset: 0 }}
                        rules={[
                            {
                                required: true,
                                message: '请输入实报金额!',
                            },
                        ]}
                    >
                        <InputNumber formatter={value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        label="承担部门"
                        name="assumeDep"
                        wrapperCol={{ span: 15 }}
                        labelCol={{ span: 24, offset: 0 }}
                        rules={[
                            {
                                required: true,
                                message: '请选择承担部门!',
                            },
                        ]}
                    >
                        <Select>
                            {
                                departmentList.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)
                            }
                        </Select>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        label="承担人员"
                        name="assumeMain"
                        wrapperCol={{ span: 15 }}
                        labelCol={{ span: 24, offset: 0 }}
                        rules={[
                            {
                                required: true,
                                message: '请选择承担人员!',
                            },
                        ]}
                    >
                        <Select>
                            {
                                userList.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)
                            }
                        </Select>
                    </Form.Item>
                </Col>

                <Col span={12}>
                    <Form.Item
                        label="办事结果"
                        name="result"
                        labelCol={{ span: 24, offset: 0 }}
                        rules={[
                            {
                                required: true,
                                message: '请选择办事结果!',
                            },
                        ]}
                    >
                        <Radio.Group>
                            <Radio value={0}>未完成</Radio>
                            <Radio value={1}>已完成</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        label="费用情况"
                        name="situation"
                        labelCol={{ span: 24, offset: 0 }}
                        rules={[
                            {
                                required: true,
                                message: '请选择费用情况!',
                            },
                        ]}
                    >
                        <Radio.Group>
                            <Radio value={0}>正常</Radio>
                            <Radio value={1}>非正常</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        label="财务审核人"
                        name="financial"
                        wrapperCol={{ span: 15 }}
                        labelCol={{ span: 24, offset: 0 }}
                        rules={[
                            {
                                required: true,
                                message: '请选择财务审核人!',
                            },
                        ]}
                    >
                        <Select>
                            {
                                userList.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)
                            }
                        </Select>
                    </Form.Item>
                </Col>
                <Col span={24}>
                    <Form.Item
                        label="简要说明"
                        name="remake"
                        labelCol={{ span: 24, offset: 0 }}
                    >
                        <TextArea showCount maxLength={100} />
                    </Form.Item>
                </Col>
            </Row>
        </Form>
    </Modal>
}

export default AddFeedBackModule;